<script type="text/javascript">
		{literal}
	if(window.opener){
		var statusP = window.opener.jQuery("#statusP");
	}else{ 
		var statusP = false; }
	$(function() {
		$( ".sortable-column" ).sortable({
			connectWith: ".sortable-column",
			//cancel: ".ui-state-disabled",
			revert: true,
			update: function(event, ui) {
				// create new wysiwyg block html, when activating one 
				// for wysiwyg
				if (ui.item.attr("id").substr(0,9)=="htmlBlock") {
					if (ui.sender && ui.sender.attr("id")=="inactive-fields") {
						var newElem = ui.item.clone(true);
						var Index = parseInt(ui.item.attr("index"))+1;
						newElem.attr("index", Index);
						newElem.attr("id", "htmlBlock_" + Index);
						
						var newContent = '<fieldset><div class="inputName">Html Block</div>' +
											'<div class="inputField" id="edit_htmlBlock_' + Index + '" style="display:none;">' +
												'<div class="htmlBlock_info"></div>' +
												'<textarea name="htmlBlock_' + Index + '"  class="htmlBlock"></textarea></div>' +
											'<div class="clr"></div>' +
											'<div class="fieldValue" id="view_htmlBlock_' + Index + '"></div>' +
											'<div class="clr"></div>' +
											'<div class="button" id="button_htmlBlock_' + Index + '">Edit</div>' +
											'<script type="text/javascript"> builderFieldBlockView("htmlBlock_' + Index + '"); <\/script>' +
										'<\/fieldset>';
						newElem.children(".portlet-content").html(newContent);
						defineBAction(newElem, false);

						newElem.appendTo("#inactive-fields");
					}else if (ui.item.parent(".inactive-fields").attr("id")) {
						defineBAction(ui.item, false);
					}else if (ui.item.parent(".active-fields").attr("id")) {
						defineBAction(ui.item, true);
					}
				}else if(ui.item.parent(".active-fields").attr("id")){
					defineBAction(ui.item, true);
				}else if (ui.item.parent(".inactive-fields").attr("id")) {
					defineBAction(ui.item, false);
				}
				resizeBuilder();
			}
		});

		$(".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
			.find( ".portlet-header" )
			.addClass( "ui-widget-header ui-corner-all" )
			.prepend( "<span class='ui-icon ui-icon-plusthick'></span>")
			.end()
			.find( ".portlet-content" );
		$(".active-fields .portlet")
			.find(".b-actions")
			.html("<a href='javascript:;' title='remove' class='b-remove-item'></a>");
		$(".portlet-header .ui-icon" ).click(function() {
			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
			resizeBuilder();
		});
	});
	function defineBAction(item, action) {
		if (action) {
			item.children(".b-actions").html("<a href='javascript:;' title='remove' class='b-remove-item'></a>").find(".b-remove-item").bind("click", removeItem);
		}else {
			item.children(".b-actions").html("");
		}
	}
	function resizeBuilder(){
		var bnHeight = $(".form-builder-cont").height();
		$("#form_builder").height(bnHeight+15);
		if (bnHeight > $(".indexDiv").height()) {
			$(".indexDiv").height(bnHeight+8)
		}
		if (bnHeight > $(".MainDiv").height()) {
			$(".MainDiv").height(bnHeight+8)
		}
	}
	function removeItem(){
		var elemClone = $(this).parents("div.portlet").clone(true);
		$(this).parents("div.portlet").hide("slow",function(){$(this).remove()});
		if ($(this).parents("div.portlet").attr("id").substr(0,9) != "htmlBlock"){
			elemClone.find(".b-actions").html("");
			elemClone.appendTo("#inactive-fields");
			resizeBuilder();
		}
	}
	function saveLayout(windCanBeCl, closeWindow){
		$.ajax({
			type: "GET",
			url: "{/literal}{$GLOBALS.site_url}{literal}/system/builder/save/",
			data: "builder-layout=" + $("#h-display-layout").val() + "&listing_type_id={/literal}{$listingTypeID}{literal}",
			cache: false,
			success: function(msg) {
				if (windCanBeCl && closeWindow && statusP) {
					statusP.html("<p class='message'>The changes you made were successfully saved</p>");
					window.close();
				}
			}
		});
	} 
	function sendChanges(closeWindow){
		var windCanBeCl = false;
		$(".active-fields").each(function(i){
			var curElem = $(this);
			var result = curElem.sortable("toArray");
			var paramString = "";
			$.each(result, function(index, value) {
				if (value) {
					var ElemID = "#" + value.toString();
					if ($(ElemID).attr('btype')) {
						var htmlValue = $("textarea[name='"+value+"']").val() ;
						paramString += "&" + value + "=" + htmlValue;
					}
				}

			});
			
			curElem.children("[complexparent]").each(function(){
				paramString += "&complex[" + $(this).attr("id") + "]=" + $(this).attr("complexparent");
			});
			
			$("#statusBox").html("<p class='error'>Is in process...</p>");
			$.ajax({
				type: "POST",
				url: "{/literal}{$GLOBALS.site_url}{literal}/system/builder/save/",
				data: "fhid=" + curElem.attr("id") + "&listing_type_id={/literal}{$listingTypeID}{literal}&order=" + result + paramString,
				cache: false,
				success: function(msg){
					if (msg == "1") {
						windCanBeCl = true;
						$("#statusBox").html("<p class='message'>Successfully saved</p>");
					}else if(msg == "-1"){
						curElem.children("span.fh-status").html("<p class='error'>Some Error Occured</p>");
					}
					saveLayout(windCanBeCl, closeWindow);
				}
			});
		});
	}
	$("document").ready(function(){
		$(".b-remove-item").bind("click", removeItem);
		if(statusP){ statusP.html(""); }
		$(".indexDiv").css("overflow","visible").css("position","inherit");
		$(".MainDiv").css("overflow","visible").css("margin-left","10px").css("position","inherit");
		$("#builder-save").bind("click",function(){
			sendChanges(true);
		});
		$("#builder-apply").bind("click",function(){
			sendChanges();
		});
		$("#builder-cancel").bind("click",function(){
			if(confirm("Are you sure? The changes you made will not be saved. Continue?")){
				//window.close()
				location.reload();
			}
		});
		resizeBuilder();
	});
	{/literal}
	</script>

<p class="b-message">To add a field - drag and drop it on the form to a place you need</p>
{if $mode eq "display"}
	<div class="clr"></div>
	<fieldset class="dl-fieldset">
		<legend class="dl-legend">Layouts:</legend>
		<div class="display-layout">
			<div class="layout-item layout-2cols-wide">
				<a {if $display_layout == "2cols-wide"}class="active"{/if} href="{$GLOBALS.site_url}{$url}?builder_mode&amp;listing_type_id={$listing_type_id}&amp;builder-layout=2cols-wide" title=""></a>
			</div>
			<div class="layout-item layout-1col-2rows">
				<a {if $display_layout == "1col-2rows"}class="active"{/if} href="{$GLOBALS.site_url}{$url}?builder_mode&amp;listing_type_id={$listing_type_id}&amp;builder-layout=1col-2rows" title=""></a>
			</div>
			<div class="layout-item layout-wide-2cols">
				<a {if $display_layout == "wide-2cols"}class="active"{/if} href="{$GLOBALS.site_url}{$url}?builder-layout=wide-2cols&amp;builder_mode&amp;listing_type_id={$listing_type_id}" title=""></a>
			</div>
			<div class="layout-item layout-2cols">
				<a {if $display_layout == "2cols"}class="active"{/if} href="{$GLOBALS.site_url}{$url}?builder-layout=2cols&amp;builder_mode&amp;listing_type_id={$listing_type_id}" title=""></a>
			</div>
			<div class="layout-item layout-1col">
				<a {if $display_layout == "1col" || !$display_layout || $display_layout eq 'undefined'}class="active"{/if} href="{$GLOBALS.site_url}{$url}?builder-layout=1col&amp;builder_mode&amp;listing_type_id={$listing_type_id}" title=""></a>
			</div>
			<div class="clr"></div>
		</div>
		<input type="hidden" name="display-layout" value="{$display_layout}" id="h-display-layout"/>
	</fieldset>
	<div class="clr"></div>
{/if}
<div class="clr"></div>
{if $mode eq "search"}
	{assign var="field_block" value="../builder/bf_searchform_fieldsblocks.tpl"}
{else}
	{assign var="field_block" value="../builder/bf_displaylisting_fieldsblocks.tpl"}
{/if}
<fieldset id="inactive-fields" class="sortable-column">
	<legend>Inactive Fields</legend>
	<div class=""></div>
	{if $mode eq "search"}
		{foreach from=$fields_inactive item=theField}
				{if $theField.type eq 'complex'}
					{foreach from=$theField.fields item="childField"}
						{include file=$field_block theField=$childField complexParent=$theField.id}
					{/foreach}
				{else}
					{include file=$field_block theField=$theField}
				{/if}
			{/foreach}
	{else}
		{foreach from=$fields_inactive item=theField}
			{include file=$field_block theField=$theField}
		{/foreach}
	{/if}

	{capture name=htmlBlockIndex}{php}echo time();{/php}{/capture}
	<div class="portlet htmlBlock" id="htmlBlock_{$smarty.capture.htmlBlockIndex}" index="{$smarty.capture.htmlBlockIndex}" btype="htmlBlock">
		<div class="b-actions"></div>
		<div class="portlet-header">Html Block</div>
		<div class="portlet-content">
			<fieldset>
				<div class="inputName">Html Block</div>
				<div class="inputField" id="edit_htmlBlock_{$smarty.capture.htmlBlockIndex}" style="display:none;">
					<div class="htmlBlock_info"></div>
					<textarea name="htmlBlock_{$smarty.capture.htmlBlockIndex}" class="htmlBlock"></textarea>
				</div>
				<div class="clr"></div>
				<div class="fieldValue" id="view_htmlBlock_{$smarty.capture.htmlBlockIndex}"></div>
				<div class="clr"></div>
				<div class="button" id="button_htmlBlock_{$smarty.capture.htmlBlockIndex}">Edit</div>
				<script type="text/javascript">{literal}
						$(document).ready(function(){
						builderFieldBlockView("{/literal}htmlBlock_{$smarty.capture.htmlBlockIndex}{literal}");
				});
				{/literal}
				</script>
			</fieldset>
		</div>
	</div>
	<div class="clr"></div>
</fieldset>
<div class="clr"></div>

<div id="listingFieldsKeys" style="display:none;">
	{literal}{<strong>*fieldID*</strong>}{/literal}
	<h1>You can use the following variables:</h1>
	{foreach from=$form_fields item="listingItem" key="propertyKey"}
		{$propertyKey} <br/>
	{/foreach}
</div>